<template>
  <div class="pay">
    <div class="container pt40">
      <div class="step sp3 clearfix">
        <p class="first over"><span></span><i>1</i><em>我的购物车</em></p>
        <p class="over"><i>2</i><em>确认订单信息</em></p>
        <p class="last over"><i>3</i><em>成功提交订单</em><span></span></p>
      </div>
    </div>
    <!-- 普通商品支付成功-->
    <div class="container pt40">
      <div class="bd1 cart_success">
        <div class="info">
          <svg-icon icon-class="success" class-name="success"></svg-icon>
          <p class="f24 c333" v-if="order.status=='paid'">订单支付成功！我们会尽快为您发货,请耐心等候……</p>
          <p class="f24 c333" v-else-if="order.status=='paying' && order.payment_method=='offline_pay'">订单已提交，请尽快完成线下支付……</p>
          <div class="c999 line24 mt10 f14">
            <p>订单号：<span class="c333">{{order.no}}</span></p>
            <p>运费：<span class="price">¥0.00</span></p>
            <p>优惠：<span class="price">¥0.00</span></p>
            <p>已付总额：<span class="price">¥{{order.total_amount}}</span></p>
          </div>
          <div class="link f18">
            <router-link class="order-detail" :to="`/my/order-detail/${order.id}`">查看订单详情</router-link>
            <router-link style="color: #999999;" to="/">继续购物</router-link>
          </div>
        </div>
      </div>

      <div class="cart-top mt30">
        <div class="clearfix" style="color:#eb6161;" v-if="order.payment_method!='offline_pay'">已使用<b class="f24 c333" style="margin:0 2%;">{{paymentDict[order.payment_method]}}</b>成功支付</div>
        <div class="clearfix" style="color:#eb6161;" v-else><b class="f24 c333" style="margin:0 2%;">线下汇款</b>支付成功，请等待平台审核</div>
      </div>

      <div class="bd1" style="margin-top: 20px;">
        <div class="bt1">
          <div class="pt30 pb30 line36 pl60 c333">
            <p class="clearfix"><span class="w180 fl">订单金额： <i class="price">¥{{order.total_amount}}</i></span></p>
            <p class="clearfix"><span class="w180 fl">配送方式：xxxx配送</span><span class="fl">服务提供商：xxxx有限公司</span></p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations } from 'vuex'
import { orderDetail } from '@/api/order'
import { paymentDict } from '@/utils/dict'
export default {
  name: 'logistics',
  metaInfo: {
    title: '支付成功详情',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      order: '',
      paymentDict,
      payType: '',
      payment: ''
    }
  },
  created () {
    this.fetchOrderDetail()
    console.log(this.order)
  },
  mounted () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    async fetchOrderDetail () {
      try {
        this.order = await orderDetail(this.$route.params.id)
        console.log(this.order); return
      } catch (e) {
        console.log(e)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .step {
    background: #ccc;
    height: 5px;
    margin: 16px 0 45px;
    display: block;
    font-size: 0
  }

  .step.adtime {
    margin-bottom: 72px
  }

  .step p {
    float: left;
    text-align: center;
    position: relative;
    height: 5px
  }

  .sp3 p {
    width: 33.333333%
  }

  .sp5 p {
    width: 50%
  }

  .step p.first span,.step p.last span {
    width: 3px;
    height: 5px;
    position: absolute;
    top: 0;
    display: block
  }

  .step p.first span {
    background-position: -7px -361px;
    left: 0
  }

  .step p.last span {
    background-position: -10px -361px;
    right: 0
  }

  .step p i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -19px 0 0 -18px;
    background-position: 0 -404px;
    font-size: 16px;
    color: #fff;
    background-color: #db0012;
    border-radius: 50%;
    font-weight: bold;
  }

  .step p i bdo {
    width: 20px;
    height: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-position: -37px -393px;
    margin: -7px 0 0 -10px
  }

  .step p em {
    width: 100%;
    display: block;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    bottom: -32px;
    position: relative;
    color: #aaa
  }

  .step p label {
    color: #999;
    bottom: -50px;
    position: relative;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    display: block
  }

  .step p.over {
    background: #eb6161
  }

  .step p.first.over span {
    background-position: 0 -361px
  }

  .step p.over i {
    background-position: 0 -368px
  }

  .step p.over em {
    color: #eb6161
  }

  .step p.last.over span {
    background-position: -3px -361px
  }

  .order-detail {
    margin-bottom: 20px;
    background-color: #4448f8;
    color: #ffffff;
  }
  .cart_success {
    padding: 50px 70px
  }

  .cart_success p {
    line-height: 20px;
  }

  .cart_success .info {
    position: relative;
    padding-left: 170px
  }

  .cart_success .info .success {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
    fill: #4448f8;
  }

  .cart_success .info .link {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -60px
  }

  .cart_success .info .link a {
    width: 200px;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center
  }
  .price {
    color: #eb6161;
  }

  .pay-box {
    margin-bottom: 30px;
  }
  .pay-box dt {
    font-size: 16px;
  }
  .pay-box label {
    line-height: 40px;
  }
  .pay-container {
    overflow: hidden;
  }
  .pay-container .choose{
    width: 500px;
  }
  .pay-container .choose label{
    display: flex;
    align-items: center;
  }
  .pay-container .choose label input{
    display: inline-block;
    padding-right: 10px;
  }
  .pay-container .choose,
  .pay-container .pay-content {
    float: left;
  }
  .pay-container .pay-content li {
    line-height: 40px;
  }

  .scan-code {
    width: 140px;
    height: 140px;
  }
  .paysuccess{
    margin-left:10%;
  }
</style>
